<template>
  <view class="nav-container" :class="{ 'dark-mode': isDarkMode }">
    <view class="nav-content">
      <view class="logo">
        <text>OJ系统</text>
      </view>
      <view class="nav-links">
        <view 
          v-for="(item, index) in navItems" 
          :key="index" 
          class="nav-item"
          :class="{ active: isActive(item.path) }"
          @click="navigateTo(item.path)"
        >
          {{ item.name }}
        </view>
        <view v-if="isAdmin" class="nav-item" :class="{ active: currentPage === '管理' }">
          管理
        </view>
        <view class="theme-toggle nav-item" @click="toggleTheme">
          <text class="theme-icon">{{ isDarkMode ? '☀️' : '🌙' }}</text>
          <text>{{ isDarkMode ? '明亮' : '暗黑' }}</text>
        </view>
      </view>
      <view class="user-avatar-container">
        <view class="user-avatar" @click="toggleUserMenu">
          <image src="/static/tx_mag/l.png" mode="aspectFill"></image>
        </view>
        <view class="user-menu" v-if="showUserMenu">
          <view class="menu-item" @click="navigateTo('/pages/user/profile')">个人主页</view>
          <view class="menu-item" @click="navigateTo('/pages/user/settings')">设置</view>
          <view class="menu-item" @click="logout">退出</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getThemeMode, toggleThemeMode } from '@/utils/themeManager.js';

export default {
  data() {
    return {
      navItems: [
        { name: '题库', path: '/pages/problem/index' },
        { name: '提交', path: '/pages/submission/index' },
        { name: '比赛', path: '/pages/contest/index' },
        { name: '小组', path: '/pages/group/index' },
        { name: '讨论', path: '/pages/discussion/index' }
      ],
      isAdmin: false,
      userAvatar: '/static/avatar.jpg',
      showUserMenu: false,
      isDarkMode: false,
      currentPath: ''
    };
  },
  mounted() {
    document.addEventListener('click', this.closeMenuOnClickOutside);
    
    // 检查当前主题
    this.isDarkMode = getThemeMode();
    
    // 监听全局主题变更
    uni.$on('global-theme-changed', (isDark) => {
      this.isDarkMode = isDark;
    });
    
    // 获取当前页面路径
    this.getCurrentPath();
    
    // 监听页面切换
    uni.$on('page-changed', (path) => {
      this.currentPath = path;
    });
  },
  beforeDestroy() {
    document.removeEventListener('click', this.closeMenuOnClickOutside);
    // 移除事件监听
    uni.$off('global-theme-changed');
    uni.$off('page-changed');
  },
  methods: {
    navigateTo(path) {
      uni.navigateTo({
        url: path
      });
      this.currentPath = path;
    },
    logout() {
      // 登出逻辑
      uni.showToast({
        title: '已登出',
        icon: 'success'
      });
      this.showUserMenu = false;
    },
    toggleUserMenu() {
      this.showUserMenu = !this.showUserMenu;
    },
    closeMenuOnClickOutside(event) {
      const avatarEl = document.querySelector('.user-avatar');
      const menuEl = document.querySelector('.user-menu');
      
      if (avatarEl && menuEl && !avatarEl.contains(event.target) && !menuEl.contains(event.target)) {
        this.showUserMenu = false;
      }
    },
    toggleTheme() {
      this.isDarkMode = toggleThemeMode();
      this.$emit('theme-change', this.isDarkMode);
    },
    getCurrentPath() {
      // 获取当前页面路径
      const pages = getCurrentPages();
      if (pages.length > 0) {
        const currentPage = pages[pages.length - 1];
        this.currentPath = '/' + currentPage.route;
      }
    },
    isActive(path) {
      // 判断当前路径是否匹配导航项
      return this.currentPath.includes(path) || 
             (this.currentPath === '/pages/index/index' && path === '/pages/problem/index');
    }
  }
};
</script>

<style>
.nav-container {
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.nav-container.dark-mode {
  background-color: #1e1e1e;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.nav-content {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.logo {
  font-size: 22px;
  font-weight: bold;
}

.dark-mode .logo {
  color: #e0e0e0;
}

.nav-links {
  display: flex;
  height: 100%;
}

.nav-item {
  padding: 0 20px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  transition: color 0.3s ease;
}

.dark-mode .nav-item {
  color: #aaa;
}

.nav-item.active {
  color: #20C0B8 !important;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100% !important;
  height: 3px;
  background-color: #20C0B8;
  opacity: 1 !important;
}

.dark-mode .nav-item.active {
  color: #20C0B8 !important;
}

.nav-item:not(.active)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background-color: #20C0B8;
  transition: width 0.3s ease, left 0.3s ease;
  opacity: 0;
}

.nav-item:not(.active):hover::after {
  width: 100%;
  left: 0;
  opacity: 1;
}

.nav-item:not(.active):hover {
  color: #20C0B8;
}

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.theme-icon {
  font-size: 16px;
}

.user-avatar-container {
  position: relative;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.user-avatar:hover {
  border-color: #20C0B8;
}

.user-avatar image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dark-mode .user-avatar {
  border: 2px solid transparent;
}

.dark-mode .user-avatar:hover {
  border-color: #158782;
}

.user-menu {
  position: absolute;
  top: 50px;
  right: 0;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 150px;
  border-radius: 4px;
  overflow: hidden;
  z-index: 1000;
}

.dark-mode .user-menu {
  background-color: #252525;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.menu-item {
  padding: 14px 15px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dark-mode .menu-item {
  color: #e0e0e0;
}

.menu-item:hover {
  background-color: #f5f5f5;
}

.dark-mode .menu-item:hover {
  background-color: #2a2a2a;
}

.theme-toggle:not(.active)::after {
  height: 0; /* 不显示横线 */
}
</style> 